import React, { useState } from 'react';

import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { Table, Input, Form, InputNumber } from 'antd'
export default function Index() {
    const defaulDataSource = [
        {
            id: 1,
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
            number: 1
        },
        {
            id: 2,
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
            number: 1
        },
    ];

    const [dataSource, setDataSource] = useState(defaulDataSource)
    const onChangeCel = (e, record) => {
        console.log("e", e.target.value)

        const newData = dataSource.map(el => {
            let number = el.number;
            if (el.id === record.id) {
                number = e.target.value
            }
            return { ...el, number }
        })
        console.log("newData", newData)
        setDataSource(newData)

    }


    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            render: (text, record) => {
                return <Input placeholder="" value={record.age} onChange={(e) => onChangeCel(e, record)} />
            }
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '数量',
            dataIndex: 'number',
            key: 'number',
            render: (text, record) => {
                return <Form.Item
                    name={record.dataIndex}
                    initialValue={record.number}
                    label="Note"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input value={record.number} onChange={(e) => onChangeCel(e, record)} />
                </Form.Item>
                // <Input placeholder="" value={record.number} onChange={(e) => onChangeCel(e, record)} />
            }
        },
    ];
    return (<PageContainer>
        <Form>
            <Table dataSource={dataSource} columns={columns} />;
        </Form>
    </PageContainer>)

}